<template>
	<view>
		<movable-area :style="{ height: areaHeight }">
			<block v-for="(item, index) in list">
				<movable-view :key="item.sign" @longpress="touchStart(index)" @change="e => change(e, index)"
					@touchend="touchend()" class="drag_item" :class="{ item_act: current == index }" :y="item.y"
					direction="vertical" :disabled='disabled'>
					<u-swipe-action :show="item.show" :index="index" :key="item.sign" @click="click" @open="open"
						:options="options">
						<view class="touch_view">

							<view class="left" :class="item.flag ?'' : 'active'">
								<div class="index">{{index + 1}} <span v-if="item.beforehandArray.length != 0" :class="item.pretreatment ? 'pretreatmentK' : 'pretreatmentT'"></span> </div>
								<div class="cnetent" @click="goDetail(index)">
									<h4 :class="item.flag ?'' : 'active'">
										{{item.userSite}}
										<span :class="item.flag ?'' : 'active'" v-if="item.selected == 0"
											style="padding: 2px 5px; font-size: 0.6rem; background-color:#1ba035;color: #fff;margin-left: 5px;">全部
										</span>
										<span :class="item.flag ?'' : 'active'" v-if="item.selected == 1"
											style="padding: 2px 5px; font-size: 0.6rem; background-color:#1ba035;color: #fff;margin-left: 5px;">工作日
										</span>
										<span :class="item.flag ?'' : 'active'" v-if="item.selected == 2"
											style="padding: 2px 5px; font-size: 0.6rem; background-color:#1ba035;color: #fff;margin-left: 5px;">休息日
										</span>
										<span :class="item.flag ?'' : 'active'" v-if="item.selected == 3"
											style="padding: 2px 5px; font-size: 0.6rem; background-color:#1ba035;color: #fff;margin-left: 5px;">单日
										</span>
										<span :class="item.flag ?'' : 'active'" v-if="item.selected == 4"
											style="padding: 2px 5px; font-size: 0.6rem; background-color:#1ba035;color: #fff;margin-left: 5px;">双日
										</span>
										<span :class="item.flag ?'' : 'active'" v-if="item.selected == 5"
											style="padding: 2px 5px; font-size: 0.6rem; background-color:#1ba035;color: #fff;margin-left: 5px;">自定义
										</span>
										<span :class="item.flag ?'' : 'active'" v-if="item.isAPP == 1"
											style="padding: 2px 5px; font-size: 0.6rem; background-color:#1ba035;color: #fff;margin-left: 5px;">APP
										</span>
									</h4>
									<p :class="item.flag ?'' : 'active'">{{item.startTime}} 至 {{item.endTime}}</p>
									<span :class="item.flag ?'' : 'active'" v-for="items in item.kindArray "
										style="padding: 2px 5px; font-size: 0.8rem; background-color:#1ba035;color: #fff;margin-left: 5px;">{{items.name}}*{{items.number}}</span>
								</div>
							</view>
							<view style="display: flex;width: 10%;">
								<!-- <u-icon :size="50" color="#B7B7BA" name="list"></u-icon> -->
								<!-- <uv-icon name="eye-fill" size="20" ></uv-icon> -->
								<!-- 删除 -->
								<uv-icon name="close" size="20" @click="del(index)"></uv-icon>
							</view>
						</view>
					</u-swipe-action>

				</movable-view>
			</block>
		</movable-area>
	</view>
</template>

<script>
	import uSwipeAction from '@/components/u-swipe-action/u-swipe-action.vue'
	export default {
		components: {
			uSwipeAction
		},
		props: {
			propList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				itemHeight: uni.upx2px(220), //每一个item的高度，我是css是108rpx 预留了2px放下划线
				current: -1, //当前选择的index
				oldIndex: -1, //记录移动前的位置，为了和移动后进行比较是否发生了位移
				newIndex: -1, //当前移动到的位置
				disabled: true, //是否可以拖动
				list: [], //渲染的list
				cloneList: [], //拷贝一份备用
				options: [ //uview的方法
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		mounted() {},
		computed: {
			areaHeight() {
				return this.list.length * this.itemHeight + 'px';
			},
		},
		watch: {
			propList: {
				handler(val) {
					this.list = this.updateList(val);
					this.cloneList = JSON.parse(JSON.stringify(this.list));
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			goDetail(index) {
				this.$emit("addOrEdit", index)
			},
			del(index) {
				this.$emit("del", index)
			},
			// 添加或更新数组y值
			updateList(list = []) {
				return list.map((item, index) => {
					return {
						...item,
						y: index * this.itemHeight,
						show: false,
						sign: Math.random() + index //防止不更新的情况和标识位
					};
				});
			},
			touchStart(index) {
				this.disabled = false
				this.current = index;
				this.oldIndex = index;
			},
			change(e, index) {
				// 不是当前元素位移直接不处理
				if (index != this.current) return;
				//位移的距离px
				let difference = e.detail.y - this.current * this.itemHeight;
				//计算位移几个位置
				let tempIndex = difference > 0 ? parseInt((difference + (this.itemHeight / 2)) / this.itemHeight) :
					parseInt((difference - (this.itemHeight / 2)) / this.itemHeight);
				//当前拖到的位置
				this.newIndex = Math.abs(this.current + tempIndex);

				if (this.newIndex > -1 && this.oldIndex > -1 && this.newIndex !== this.oldIndex) {
					this.changeList();
				}
			},
			changeList() {
				// 没想到怎么改变原数组, 直接拷贝一份数组出来,不考虑情况 一把梭 直接遍历拷贝的原数组.
				//直接把改变位置赋值回去不行，不知道为什么，只能改变每一项的y值
				let arr = JSON.parse(JSON.stringify(this.cloneList));
				arr.splice(this.newIndex, 0, ...arr.splice(this.current, 1));
				this.list.forEach((item, index) => {
					if (index !== this.current) {
						item.y = arr.findIndex(citem => citem.sign == item.sign) * this.itemHeight;
					}
				});
				this.oldIndex = this.newIndex;
			},
			touchend() {
				if (this.newIndex > -1 && this.current > -1 && this.newIndex !== this.current) {
					this.cloneList.splice(this.newIndex, 0, ...this.cloneList.splice(this.current, 1));
					this.list = this.updateList(this.cloneList);
					this.cloneList = JSON.parse(JSON.stringify(this.list));
					this.emitChang(this.list)
				}
				this.current = -1;
				this.oldIndex = -1;
				this.newIndex = -1;
				this.disabled = true
			},
			click(index, index1) {
				if (index1 == 0) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
					this.list = this.updateList(this.list)
					this.cloneList = JSON.parse(JSON.stringify(this.list))
					this.emitChang(this.list)
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				});
			},
			emitChang(arr) {
				let tempArr = JSON.parse(JSON.stringify(arr))
				tempArr.forEach(item => {
					delete item.y
					delete item.show
					delete item.sign
				})
				this.$emit('change', tempArr)
			}
		}
	};
</script>

<style lang="scss">
	.drag_item {
		width: 100%;
		background-color: #fff;
		height: max-content;
		border-bottom: 1px solid #e3e3e3;

		&:nth-last-of-type(1) {
			border: none;
		}
	}

	movable-area {
		width: 100%;
		background-color: #fff;
		overflow: hidden;
	}



	.drag_item.item_act {
		border: 1px solid #ffe44b;
		z-index: 999;
		box-sizing: border-box;
	}

	.active {
		color: red !important;

	}

	.touch_view {
		width: 690rpx; //设置100%时候会有闪动
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 218rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;
			width: 90%;
			padding: 10px;
			box-sizing: border-box;

			text {
				margin-left: 20rpx;
				font-size: 30rpx;
				color: #666666;
			}

			.index {
				width: 20%;
				font-size: 1.2rem;
				display: flex;
				justify-content: center;
				border-right: 2px solid #f1f1f1;
				margin-right: 10px;
				height: 150rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				span{
					display: inline-block;
					width: 10px;
					height: 10px;
					border-radius: 50%;
					position: absolute;
					top: 0;
					left: -10px;
				}
				// 预处理开启
				.pretreatmentK{
					background-color: #5b993a;
				}
				//预处理停止
				.pretreatmentT{
					background-color: red;
				}
			}
			.cnetent {
				width: 100%;
				overflow: hidden;
				 h4 {
					font-size: 1rem;
					font-weight: 700;
					color: #333;
				}
				p {
					font-size: 0.8rem;
					color: #666;
					margin: 5px 0;
				}
			}
		}
	}
</style>